<%
layout("layout.html",{title:'管理员列表', first: '用户', second: '管理员列表', menu: '用户'}){
%>
<script src="${ctxPath}/js/md5.min.js"></script>
<script>
    $(document).ready(function(){
        $('#saveButton').click(function () {
            var admin = {
                nickname: $('#nicknameInput').val(),
                phone: $('#phoneInput').val(),
                password: md5($('#passwordInput').val())
            };
            $('#createModal').modal('hide');
            $.ajax({
                type: 'POST',
                url: '${ctxPath}/api/admins',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                data: JSON.stringify(admin),
                success: function (response) {
                    admin.id = response.data;
                    var elStr = '<tr><td>'
                        + admin.id
                        +'</td><td>'
                        + admin.nickname
                        + '</td><td>'
                        + admin.phone
                        + '</td><td>'
                        + '正常'
                        + '</td></tr>';
                    $('#adminTbody').append(elStr);
                    $.growl.notice({title: '保存成功', message: '管理员保存成功' });
                },
                error: function (err) {
                    console.log(err);
                    $.growl.notice({title: '保存错误', message: '网络错误' });
                }
            });
        });
    });
</script>
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">管理员列表</h3>
            </div>
            <div class="box-body">
                <div>
                    <button class="btn btn-primary" data-toggle="modal" data-target="#createModal">新建</button>
                    <div class="modal fade" id="createModal" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">新建管理员</h4>
                                </div>
                                <div class="modal-body">
                                    <form role="form">
                                        <div class="form-group">
                                            <label for="nicknameInput">昵称</label>
                                            <input type="text" class="form-control" id="nicknameInput" placeholder="请输入管理员昵称" />
                                        </div>
                                        <div class="form-group">
                                            <label for="phoneInput">手机</label>
                                            <input type="text" class="form-control" id="phoneInput" placeholder="请输入手机号码" />
                                        </div>
                                        <div class="form-group">
                                            <label for="passwordInput">密码</label>
                                            <input type="password" class="form-control" id="passwordInput" placeholder="请输入密码" />
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="saveButton">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>昵称</th>
                        <th>手机</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody id="adminTbody">
                    <% for (admin in admins) { %>
                    <tr>
                        <td>${admin.id}</td>
                        <td>${admin.nickname}</td>
                        <td>${admin.phone}</td>
                        <td>${admin.deleted == false ? '正常' : '已删除'}</td>
                    </tr>
                    <% } %>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<% } %>